<template>
  <div class="quantity_content">
    <el-tabs v-model="postData.nuclearStatus" @tab-change="tabChange">
      <el-tab-pane :label="`等待核量( ${count.waiting} )`" :name="1">
        <data-list :list="pageList" @edit="goDetail"></data-list>
      </el-tab-pane>
      <el-tab-pane :label="`已核量( ${count.completed} )`" :name="2">
        <data-list :list="pageList" @edit="goDetail"></data-list>
      </el-tab-pane>
    </el-tabs>
    <div class="search_bar">
      <el-input
        style="width: 280px"
        :prefix-icon="Search"
        v-model="postData.searchContent"
        placeholder="请输入业主姓名、房屋地址、手机号"
        @keydown.enter="getPageList(postData)"
      />
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import dataList from "./components/dataList.vue";
import { getQuantityList } from "@/apis/budgetQuotation";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const count = ref({
  waiting: 0,
  completed: 0
});

const postData = ref({
  nuclearStatus: 1,
  searchContent: ""
});

const pageList = ref([]);

const getPageList = async param => {
  console.log(param);
  let { data } = await getQuantityList(param);
  pageList.value = data;

  count.value[param.nuclearStatus === 1 ? "waiting" : "completed"] = data.length;
  console.log(pageList.value);
};

const tabChange = () => {
  getPageList(postData.value);
};

const goDetail = item => {
  router.push({
    path: "/quantity/deatil",
    query: {
      ...item
    }
  });
};

(async () => {
  await getPageList({ nuclearStatus: 2 });
  await getPageList(postData.value);
})();
</script>
<style lang="scss">
.quantity_content {
  height: 100%;
  border-radius: 10px;
  background-color: #f6f6f6;
  position: relative;
  .search_bar {
    position: absolute;
    top: 8px;
    right: 16px;
  }
  .el-tabs__nav-scroll {
    padding: 10px 10px 0 20px;
  }
  .el-tabs__nav-wrap {
    background-color: white;
    border-radius: 10px 10px 0 0;
  }
  .el-input__wrapper {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }
}
</style>
